<template>
	<view class="complaints">
		<view class="title">投诉/建议标题</view>
		<input v-model.trim="title" class="uni-input" placeholder="请输入投诉/建议标题（至少8字）" />
		<view class="content">投诉/建议内容</view>
		<textarea class="uni-textarea" v-model.trim="content" :maxlength="300" placeholder="请输入内容，300字以内"></textarea>
		<view class="text-count">{{ `${content.length} / 300` }}</view>
		<view class="imgs flex">
			<view class="img">
				<view v-if="!img1" class="flex flex-col items-center" @click="addImg(1)">
					<img class="pic" src="../../static/pic.png" alt="">
					<text>添加图片</text>
				</view>
				<view v-else class="img-box">
					<img class="img-item" :src="img1" alt="">
					<img class="close" src="../../static/close2.png" alt="" @click="removeImg(1)">
				</view>
			</view>
			<view v-if="img1" class="img">
				<view v-if="!img2" class="flex flex-col items-center" @click="addImg(2)">
					<img class="pic" src="../../static/pic.png" alt="">
					<text>添加图片</text>
				</view>
				<view v-else class="img-box">
					<img class="img-item" :src="img2" alt="">
					<img class="close" src="../../static/close2.png" alt="" @click="removeImg(2)">
				</view>
			</view>
		</view>
		<view class="sub" @click="submit">提交</view>
		<Loading ref="loading"></Loading>
	</view>
</template>

<script>
	import Loading from '@/components/loding.vue'
	import {
		baseUrl,
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				title: '',
				content: '',
				img1: '',
				img2: '',
			}
		},
		components: {
			Loading
		},
		methods: {
			addImg(num) {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.uploadFile({
							url: baseUrl + '/common/minio/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (resp => {
								if (resp.statusCode === 200) {
									const resObj = JSON.parse(resp.data)
									this[`img${num}`] = resObj.url
								} else {
									uni.showToast({
										title: '上传失败，请重试！',
										icon: 'error',
									})
								}
								
							}),
							fail: () => {
								uni.showToast({
									title: '上传失败，请重试！',
									icon: 'error',
								})
							}
						})
					}
				})
			},
			submit() {
				if (this.title.length < 8) {
					uni.showToast({
						title: '投诉/建议标题（至少8字）！',
						icon: 'error',
					})
					return
				}
				if (this.content.length > 300) {
					uni.showToast({
						title: '内容最多300字！',
						icon: 'error',
					})
					return
				}
				const getImg = () => {
					if (this.img1 && !this.img2) {
						return this.img1
					} else if (this.img1 && this.img2) {
						return this.img1 + ',' + this.img2
					} else {
						return ''
					}
				}
				const userId = uni.getStorageSync('userId')
				const params = {
					contents: this.content,
					imgUrl: getImg(),
					title: this.title,
					userId: userId,
				}
				request('/api/hlx-complaint/add',params, 'post' ).then(res => {
					console.log(res)
					if (res.data.code === 200) {
						uni.showToast({
							title: '提交成功！'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
						
					} else {
						uni.showToast({
							title: '提交失败，请重试！',
							icon: 'error',
						})
					}
				})
			},
			removeImg (i) {
				if (i === 1) {
					if (this.img2) {
						this.img1 = this.img2
						this.img2 = ''
					} else {
						this.img1 = ''
					}
				} else {
					this.img2 = ''
				}
			}
		},
		onLoad() {
			this.$refs.loading.init()
			this.$refs.loading.progress = 100
			setTimeout(() => {
				this.$refs.loading.destoryed()
			}, 300)
		}
	}
</script>

<style lang="less" scoped>
.complaints {
	padding: 25rpx;
	border-top: 4rpx solid #999;
	.title, .content {
		padding-left: 20rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
		margin: 24rpx 0;
	}
	.uni-input {
		height: 64rpx;
		background: #EFEFF1;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		padding-left: 32rpx;
	}
	.uni-textarea {
		width: 640rpx;
		height: 450rpx;
		background: #EFEFF1;
		border-radius: 8rpx 8rpx 0 0;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		line-height: 32rpx;
		padding: 12rpx 30rpx;
	}
	.imgs {
		margin-top: 48rpx;
		.img {
			width: 216rpx;
			height: 216rpx;
			background: #EFEFF1;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-right: 22rpx;
			.pic {
				width: 52rpx;
				height: 47rpx;
				margin: 70rpx 0 24rpx 0;
			}
			text {
				font-size: 24rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
			}
			.img-box {
				position: relative;
				width: 216rpx;
				height: 216rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				.img-item {
					width: 216rpx;
					height: 216rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
				.close {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}
			}
			
			
		}
	}
	.sub {
		width: 700rpx;
		height: 70rpx;
		background: #006FF2;
		text-align: center;
		font-size: 30rpx;
		border-radius: 70rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 70rpx;
		margin-top: 30rpx;
	}
	.text-count {
		width: 700rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
		background: #EFEFF1;
		padding: 10rpx 30rpx;
		border-radius: 0 0 8rpx 8rpx;
		text-align: right;
		
	}
}
</style>
